<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交平台底部导航</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --light-gray: #E5E7EB;
      --dark-gray: #6B7280;
      --white: #FFFFFF;
      --border-light: #E5E7EB;
      --border-dark: #374151;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      height: 100vh;
      overflow-x: hidden;
      margin: 0;
      padding-bottom: 60px; /* 为底部导航留出空间 */
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
      height: 100%;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 页面内容 */
    .page-content {
      padding: 20px;
      text-align: center;
      min-height: calc(100vh - 60px);
    }
    
    .page-title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .page-title {
      color: var(--white);
      border-bottom-color: var(--border-dark);
    }
    
    /* 底部导航基础样式 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      display: flex;
      background-color: var(--white);
      border-top: 1px solid var(--border-light);
      z-index: 1000;
    }
    
    .dark .bottom-nav {
      background-color: #111827;
      border-top-color: var(--border-dark);
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--dark-gray);
      text-decoration: none;
      font-size: 10px;
      transition: color 0.2s ease;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .dark .nav-item {
      color: #9CA3AF;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 4px;
    }
    
    /* 风格1: 经典图标文字导航 */
    .style-classic .nav-item {
      position: relative;
    }
    
    .style-classic .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
    }
    
    /* 风格2: 凸起图标导航 */
    .style-raised .bottom-nav {
      padding: 0 15px;
      height: 70px;
      align-items: flex-end;
    }
    
    .style-raised .nav-item {
      padding: 10px 0 15px;
      border-radius: 12px 12px 0 0;
      margin-bottom: 5px;
      width: 20%;
    }
    
    .style-raised .nav-item.active {
      background-color: var(--primary);
      color: white;
    }
    
    .style-raised.dark .nav-item.active {
      background-color: var(--primary);
    }
    
    /* 风格3: 带中间突出按钮的导航 */
    .style-emphasis .bottom-nav {
      height: 70px;
      padding: 0 15px 10px;
    }
    
    .style-emphasis .nav-item {
      justify-content: flex-end;
      padding-bottom: 10px;
    }
    
    .style-emphasis .nav-item.emphasis {
      position: relative;
      flex: 0 0 60px;
    }
    
    .style-emphasis .emphasis-btn {
      position: absolute;
      bottom: 10px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
      border: 4px solid var(--white);
    }
    
    .style-emphasis.dark .emphasis-btn {
      border-color: #111827;
    }
    
    .style-emphasis .emphasis-btn .nav-icon {
      margin-bottom: 0;
      font-size: 24px;
    }
    
    /* 风格4: 简约标签导航 */
    .style-minimal .bottom-nav {
      height: 50px;
    }
    
    .style-minimal .nav-item {
      font-size: 14px;
      flex-direction: row;
      gap: 6px;
      padding: 0 8px;
    }
    
    .style-minimal .nav-icon {
      font-size: 16px;
      margin-bottom: 0;
    }
    
    /* 深色模式 */
    .dark {
      background-color: var(--dark);
      color: var(--white);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 1001;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .dark .style-switcher {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .switcher-header {
      border-bottom-color: var(--border-dark);
      color: var(--white);
    }
    
    .style-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .style-option:hover {
      background-color: var(--light);
    }
    
    .dark .style-option {
      color: var(--white);
    }
    
    .dark .style-option:hover {
      background-color: #374151;
    }
    
    .style-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 通知徽章 */
    .badge {
      position: absolute;
      top: 5px;
      right: 15px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: var(--danger);
      color: white;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .style-emphasis .badge {
      top: 0;
      right: 5px;
    }
    
    .style-minimal .badge {
      top: 3px;
      right: 8px;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">底部导航样式</div>
    <div class="style-option active" data-style="classic">经典图标文字</div>
    <div class="style-option" data-style="raised">凸起图标</div>
    <div class="style-option" data-style="emphasis">突出按钮</div>
    <div class="style-option" data-style="minimal">简约标签</div>
    <div class="style-option" data-style="dark">深色模式</div>
  </div>
  
  <!-- 经典图标文字导航页面 -->
  <div class="page-container active style-classic" id="classicPage">
    <div class="page-content">
      <h1 class="page-title">首页</h1>
      <p>这是经典图标文字风格的底部导航示例</p>
      <p>当前选中: 首页</p>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active" data-page="home">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item" data-page="discover">
        <i class="fa fa-compass nav-icon"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-item" data-page="messages">
        <i class="fa fa-envelope nav-icon"></i>
        <span>消息</span>
        <span class="badge">3</span>
      </a>
      <a href="#" class="nav-item" data-page="profile">
        <i class="fa fa-user nav-icon"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>
  
  <!-- 凸起图标导航页面 -->
  <div class="page-container style-raised" id="raisedPage">
    <div class="page-content">
      <h1 class="page-title">首页</h1>
      <p>这是凸起图标风格的底部导航示例</p>
      <p>当前选中: 首页</p>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active" data-page="home">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item" data-page="discover">
        <i class="fa fa-compass nav-icon"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-item" data-page="messages">
        <i class="fa fa-envelope nav-icon"></i>
        <span>消息</span>
        <span class="badge">3</span>
      </a>
      <a href="#" class="nav-item" data-page="profile">
        <i class="fa fa-user nav-icon"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>
  
  <!-- 带中间突出按钮的导航页面 -->
  <div class="page-container style-emphasis" id="emphasisPage">
    <div class="page-content">
      <h1 class="page-title">首页</h1>
      <p>这是带中间突出按钮的导航示例</p>
      <p>当前选中: 首页</p>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active" data-page="home">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item" data-page="discover">
        <i class="fa fa-compass nav-icon"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-item emphasis" data-page="create">
        <div class="emphasis-btn">
          <i class="fa fa-plus nav-icon"></i>
        </div>
      </a>
      <a href="#" class="nav-item" data-page="messages">
        <i class="fa fa-envelope nav-icon"></i>
        <span>消息</span>
        <span class="badge">3</span>
      </a>
      <a href="#" class="nav-item" data-page="profile">
        <i class="fa fa-user nav-icon"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>
  
  <!-- 简约标签导航页面 -->
  <div class="page-container style-minimal" id="minimalPage">
    <div class="page-content">
      <h1 class="page-title">首页</h1>
      <p>这是简约标签风格的底部导航示例</p>
      <p>当前选中: 首页</p>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active" data-page="home">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item" data-page="discover">
        <i class="fa fa-compass nav-icon"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-item" data-page="messages">
        <i class="fa fa-envelope nav-icon"></i>
        <span>消息</span>
        <span class="badge">3</span>
      </a>
      <a href="#" class="nav-item" data-page="profile">
        <i class="fa fa-user nav-icon"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>
  
  <!-- 深色模式导航页面 -->
  <div class="page-container style-classic dark" id="darkPage">
    <div class="page-content">
      <h1 class="page-title">首页</h1>
      <p>这是深色模式的底部导航示例</p>
      <p>当前选中: 首页</p>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active" data-page="home">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item" data-page="discover">
        <i class="fa fa-compass nav-icon"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-item" data-page="messages">
        <i class="fa fa-envelope nav-icon"></i>
        <span>消息</span>
        <span class="badge">3</span>
      </a>
      <a href="#" class="nav-item" data-page="profile">
        <i class="fa fa-user nav-icon"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取DOM元素
    const styleOptions = document.querySelectorAll('.style-option');
    const pageContainers = document.querySelectorAll('.page-container');
    const navItems = document.querySelectorAll('.nav-item');
    
    // 当前激活的样式索引
    let currentStyle = 'classic';
    
    // 切换导航样式
    styleOptions.forEach(option => {
      option.addEventListener('click', function() {
        // 更新样式选项的活跃状态
        styleOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 获取选中的样式
        currentStyle = this.getAttribute('data-style');
        
        // 隐藏所有页面
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 显示对应样式的页面
        const stylePage = document.getElementById(`${currentStyle}Page`);
        if (stylePage) {
          stylePage.classList.add('active');
          
          // 重置该页面的导航选中状态
          const pageNavItems = stylePage.querySelectorAll('.nav-item');
          pageNavItems.forEach(item => item.classList.remove('active'));
          pageNavItems[0].classList.add('active');
          
          // 更新页面内容
          updatePageContent(stylePage, 'home');
        }
      });
    });
    
    // 导航项点击事件委托
    document.addEventListener('click', function(e) {
      const navItem = e.target.closest('.nav-item');
      if (navItem && navItem.closest('.bottom-nav')) {
        e.preventDefault();
        
        // 获取当前活跃的页面
        const activePage = document.querySelector('.page-container.active');
        if (!activePage) return;
        
        // 移除所有导航项的活跃状态
        const pageNavItems = activePage.querySelectorAll('.nav-item');
        pageNavItems.forEach(item => item.classList.remove('active'));
        
        // 添加当前导航项的活跃状态
        navItem.classList.add('active');
        
        // 更新页面内容
        const pageName = navItem.getAttribute('data-page');
        updatePageContent(activePage, pageName);
      }
    });
    
    // 更新页面内容
    function updatePageContent(pageContainer, pageName) {
      const pageTitles = {
        'home': '首页',
        'discover': '发现',
        'messages': '消息',
        'profile': '我的',
        'create': '发布'
      };
      
      const pageDescriptions = {
        'home': '浏览最新动态和好友分享的内容',
        'discover': '发现热门话题和推荐内容',
        'messages': '查看和回复你的消息',
        'profile': '管理你的个人资料和设置',
        'create': '发布新内容、动态或文章'
      };
      
      const pageTitleElement = pageContainer.querySelector('.page-title');
      const pageContentElement = pageContainer.querySelector('.page-content p:nth-child(2)');
      const pageCurrentElement = pageContainer.querySelector('.page-content p:nth-child(3)');
      
      if (pageTitleElement && pageContentElement && pageCurrentElement) {
        pageTitleElement.textContent = pageTitles[pageName] || '页面';
        pageContentElement.textContent = getStyleDescription(currentStyle);
        pageCurrentElement.textContent = `当前选中: ${pageTitles[pageName] || '未知页面'}`;
      }
      
      // 如果是发布按钮，添加特殊效果
      if (pageName === 'create') {
        showCreateAnimation(pageContainer);
      }
    }
    
    // 获取样式描述
    function getStyleDescription(style) {
      const descriptions = {
        'classic': '这是经典图标文字风格的底部导航示例',
        'raised': '这是凸起图标风格的底部导航示例',
        'emphasis': '这是带中间突出按钮的导航示例',
        'minimal': '这是简约标签风格的底部导航示例',
        'dark': '这是深色模式的底部导航示例'
      };
      return descriptions[style] || '这是社交平台底部导航示例';
    }
    
    // 显示发布按钮动画
    function showCreateAnimation(pageContainer) {
      const emphasisBtn = pageContainer.querySelector('.emphasis-btn');
      if (emphasisBtn) {
        emphasisBtn.style.transform = 'scale(1.2)';
        emphasisBtn.style.transition = 'transform 0.3s ease';
        
        setTimeout(() => {
          emphasisBtn.style.transform = 'scale(1)';
        }, 300);
      }
    }
  </script>
</body>
</html>
